<template>
  <div class="body">
    <div>
      <van-icon name="arrow-left" size="10vw" @click="checkReturn" />
    </div>
    <div class="bgimg">
      <!-- 标题 -->
      <span class="bt">用户登录</span>
      <!-- 邮箱输入框输入框 -->
      <div class="ctt">
        <div class="box">
          <van-icon class="img" name="envelop-o" size="12vw" />
          <input
            @blur="checkUemail"
            v-model="email"
            id="email"
            type="text"
            placeholder="邮箱"
          />
        </div>
        <span id="email_message" class="message">&nbsp;</span>
      </div>
      <div class="ctt">
        <!-- 密码输入框输入框 -->
        <div class="box">
          <img class="img" src="../../../assets/img/2.png" alt="" />
          <input
            @blur="checkUpwd"
            v-model="upwd"
            id="upwd"
            type="password"
            placeholder="密码"
          />
        </div>
        <span id="upwd_message" class="message">&nbsp;</span>
      </div>
      <div class="ctt">
        <div class="box">
          <img class="img" src="../../../assets/img/3.png" alt="" />
          <input @blur="checkYzm" id="uyzm" v-model="uyzm" placeholder="验证码" />
          <span class="yzm" @click="changeImg" id="code" title="看不清，换一张"
            >获取验证码</span
          >
        </div>
        <span id="uyzm_message" class="message">&nbsp;</span>
      </div>
      <!-- 注册按钮 -->
      <div class="box-btn">
        <div class="btn" @click="checkFrom">用户登录</div>
        <span class="login" @click="checkRegister">没有用户,立即注册</span>
        <br>
        <span class="login" @click="checkManage">店铺管理/系统管理员登录</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: "",
      upwd: "",
      uyzm: "",
    };
  },
  methods: {
    // 点击切换验证码
    changeImg() {
      var code; //声明一个变量用于存储生成的验证码
      var arrays = new Array(
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "0",
        "a",
        "b",
        "c",
        "d",
        "e",
        "f",
        "g",
        "h",
        "i",
        "j",
        "k",
        "l",
        "m",
        "n",
        "o",
        "p",
        "q",
        "r",
        "s",
        "t",
        "u",
        "v",
        "w",
        "x",
        "y",
        "z",
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z"
      );
      code = ""; //重新初始化验证码
      //随机从数组中获取四个元素组成验证码
      for (var i = 0; i < 4; i++) {
        //随机获取一个数组的下标
        var r = parseInt(Math.random() * arrays.length);
        code += arrays[r];
      }
      document.getElementById("code").innerHTML = code; //将验证码写入指定区域
    },
    // 邮箱格式验证
    checkUemail() {
      let exp = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
      if (exp.test(this.email)) {
        email_message.innerHTML = "邮箱通过";
        email_message.style.color = "green";
        return true;
      } else {
        email_message.innerHTML = "请输入正确格式邮箱名";
        email_message.style.color = "red";
        return false;
      }
    },
    // 密码格式验证
    checkUpwd() {
      let exp = /^[a-zA-Z]\w{5,17}$/;
      // let exp = /^[A-Za-z0-9]+$/;
      if (exp.test(this.upwd)) {
        upwd_message.innerHTML = "密码通过";
        upwd_message.style.color = "green";
        return true;
      } else {
        upwd_message.innerHTML = "请输入由6-18字母开头数字组成";
        upwd_message.style.color = "red";
        return false;
      }
    },
    //
    checkYzm() {
      if (this.uyzm == code.innerHTML) {
        uyzm_message.innerHTML = "验证码通过";
        uyzm_message.style.color = "green";
        return true;
      } else {
        uyzm_message.innerHTML = "请输入正确的验证";
        uyzm_message.style.color = "red";
        return false;
      }
    },
    // 登录按钮
    checkFrom() {
      if (this.checkUemail() && this.checkUpwd() && this.checkYzm()) {
        let params = `email=${this.email}&upwd=${this.upwd}`;
        this.axios.post("/login", params).then((res) => {
          console.log("用户",res);
          if (res.data.code == 200) {
              // console.log(res.data.results.uid);
            this.$store.commit("updataid", res.data.results.uid);
            this.$store.commit("updataEame", this.email);
            this.$store.commit("updataName", res.data.results.uname);
            this.$router.push("/means");
          } else if(res.data.code == 202) {
            this.$messagebox("登录错误", "该账号为管理系统账号，请前往管理系统登录");
          }else if(res.data.code == 201){
            this.$messagebox("登录错误", "请重新登录");
          }
        });
      } else {
        this.$messagebox("登录失败", "请重新登录");
      }
    },
    checkRegister() {
      this.$router.push("/register");
    },
    checkReturn() {
      this.$router.push("/");
    },
    checkManage(){
      this.$router.push('/manage/login')
    }
  },
};
</script>

<style lang="scss" scoped>
.body {
  width: 100vw;
  height: 100vh;
  background-image: url(@/assets/img/bj.jpg);
  background-repeat: no-repeat;
  background-position: center 0;
  background-size: cover;
}
::v-deep .mint-msgbox-confirm {
  color: black;
}
</style>
<style scoped src="@/assets/CSS/login.css">
</style>
<style scoped>
</style>